<template>
  <div class="func-item-wrapper">
    <!-- <div class="item-box" :class="canUse.includes(data.name)?'':'disabled'" v-if="!itemVisible"> -->
    <div class="item-box" :class="data.isShow?'':'disabled'" v-if="!data.isShow">
      <img class="func-icon" :src="imgSrc(data)" alt="">
      <span class="label">{{lang==='zh'? data.name : data.enName}}</span>
    </div>
    <a-popover v-model="visible" overlayClassName="func-pop" title="" trigger="click" placement="bottomLeft" v-else>
      <!-- <div class="item-box" :class="canUse.includes(data.name)?'':'disabled'" @click="handleClick"> -->
      <div class="item-box" :class="data.isShow?'':'disabled'" @click="handleClick">
        <img class="func-icon" :src="imgSrc(data)" alt="">
        <span class="label">{{ lang==='zh'? data.name : data.enName||data.name}}</span>
      </div>
      <template slot="content">
        <div v-if="!data.children || data.children.length===0">暂无数据</div>
        <template v-else>
          <ul class="sub-ul clearfix">
            <li class="sub-li" v-for="(item) in data.children?data.children:[]" :key="item.id">
              <div class="label" :class="activeItem===item.id?'active':''" @click="toggle(item)">{{lang==='zh'? item.name : item.enName||data.name}}</div>
            </li>
          </ul>
          <ul class="third-ul clearfix">
            <li class="sub-li" v-for="(item) in childOptions" :key="item.id">
              <div class="label" @click="goto(item)">
                <span class="txt">{{lang==='zh'? data.name : data.enName||data.name}}</span>
              </div>
            </li>
          </ul>
        </template>
      </template>
    </a-popover>
    <!-- 临界值弹框 -->
    <set-critical :criticalValueVsisible="criticalValueVsisible" @submitCritical="submitCritical" @valueCancel="valueCancel"></set-critical>
  </div>
</template>

<script>
import { userinfo } from '@/api/middleGround'
import { myAppPermission } from "@/api/projectManage.js"
import setCritical from "@/views/plmHomePage/projectManage/modules/setCritical.vue";
let userInfo = userinfo
export default {
  name: 'FuncItem',
  components:{ setCritical },
  props: {
    data: {
      type: Object,
      drfault: () => ({})
    }
  },
  data () {
    return {
      activeItem: '',
      visible: false,
      // itemVisible: false,
      // canUse: ['需求管理', '项目管理', '产品型谱管理', '人事管理系统'],
      /**设置临界值参数 */
      criticalValueVsisible: false, // 设置临界弹框显隐
      hasPermission: false, // 是否有权限
      lang: this.$store.state.i18nData.lang || 'zh',
    }
  },
  computed: {
    childOptions () {
      let childrenArr = this.data.children
      childrenArr = childrenArr ? childrenArr : []
      let currentObj = childrenArr.find(item => item.id === this.activeItem)
      currentObj = currentObj ? currentObj : {}
      let childOpts = currentObj.children ? currentObj.children : []
      return childOpts
    }
  },
  watch:{
    '$store.state.i18nData.lang': function(v) {
      this.lang = v
    },
  },
  mounted() {
    // this.itemVisible = this.canUse.includes(this.data.name)
    this.getAppPermission();  //获取权限
  },
  methods: {
    handleClick() {
      if (this.data.name!=='项目管理') {
        this.visible = false
         if(this.data.name=='需求管理'){
           window.open(this.data.link)
         }
      }else {
        this.visible = !this.visible
      }
    },
    imgSrc (item) {
      return item.newIcon
      // if (item.icon && item.icon.startsWith('http')) {
      //   return item.icon
      // }
      // if (item.id == 19) {
      //   return xqgl
      // }
      // if (item.id == 20) {
      //   return xmgl
      // }
      // if (item.id == 29) {
      //   return cpxpgl
      // }
      // if (item.id == 30) {
      //   return cpsjgl
      // }
      // if (item.id == 31) {
      //   return gygl
      // }
      // if (item.id == 32) {
      //   return fwzlgl
      // }
      // return fwzlgl
    },
    // 我的应用权限
    getAppPermission() {
      let data = {
        "userId":userInfo.loginName,
        "number":"80",
        "oid":""
      }
      myAppPermission(data).then(res => {
        if (res && res.status === 200) {
          if (res.data && res.data.data.length > 0) {
            this.hasPermission = res.data.data[0].hasPermission
          }
        }
      })
    },
    toggle (item) {
      this.activeItem = item.id
      this.goto(item)
    },
    goto (item) {
      if (item.name === "创建项目") {
        let data = {
          "userId":userInfo.loginName,
          "number":"80",
          "oid":""
        }
        myAppPermission(data).then(res => {
          if (res && res.status === 200) {
            if (res.data && res.data.data.length > 0) {
              if (res.data.data[0].hasPermission) {
                this.visible = false
                if (!item.link) {
                  return
                }
                if (item.link.indexOf('http') != -1) {
                  window.open(item.link)
                } else {
                  this.$router.push({
                    path: item.link
                  })
                }
              } else {
                this.$message.warn('您没有权限创建项目')
              }
            }
          }
        })
      } else if(item.name === "项目报表") {
        this.$router.push({
            path: "/reportTool"
        })
      } else if(item.name === "项目规划") {
        this.$router.push({
            path: "/projectPlanningDoc"
        })
      }else if(item.name === "项目临界值"){
        if (this.hasPermission) {
          this.criticalValueVsisible = true
          this.visible = false
        } else {
          return
        }
      }else{
        this.visible = false
        if (!item.link) {
          return
        }
        if (item.link.indexOf('http') != -1) {
          window.open(item.link)
        } else {
          this.$router.push({
            path: item.link
          })
        }
      }
    },
    // 设置临界值
    setCritical() {
      if (this.hasPermission) {
        this.criticalValueVsisible = true
      } else {
        return
      }
    },
    submitCritical() {
      this.criticalValueVsisible = false
    },
    valueCancel() {
      this.criticalValueVsisible = false
    }
  }
}
</script>

<style lang="less" scoped>
.func-item-wrapper {
  // width: 70px;
  .item-box {
    text-align: center;
    cursor: pointer;
    .func-icon {
      display: block;
      margin: 0 auto;
      width: 66px;
      margin-bottom: 10px;
    }
  }
  .disabled{
    cursor: no-drop;
    opacity: .3;
  }
}
</style>
